import React from 'react';
import { Modal, Button, Form, Input, InputNumber, Select } from 'antd';

const Item = Form.Item;
const Option = Select.Option;
const TextArea = Input.TextArea;

@Form.create()
class Components extends React.Component {
  /**
   * 提交表单到父组件
   */
  onOk = () => {
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        this.props.submit(values);
      }
    });
  };
  clear = () => {
    this.props.form.resetFields();
  };

  render() {
    const {
      visible,
      formatData,
      close,
      form: { getFieldDecorator },
    } = this.props;

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
      },
    };
    return (
      <Modal
        title="配置备份服务器"
        afterClose={this.clear}
        visible={visible}
        onCancel={close}
        okText="确定"
        cancelText="取消"
        onOk={this.onOk}
      >
        <Form>
          <Item {...formItemLayout} label="IP">
            {getFieldDecorator('serverIp', {
              rules: [{ required: true, message: '不能为空' }],
              initialValue: formatData && formatData.serverIp,
            })(<Input />)}
          </Item>
          <Item {...formItemLayout} label="协议类型">
            {getFieldDecorator('agreement', {
              rules: [{ required: true, message: '不能为空' }],
              initialValue: formatData && formatData.agreement,
            })(
              <Select>
                {['scp'].map(item => (
                  <Option key={item} value={item}>
                    {item}
                  </Option>
                ))}
              </Select>
            )}
          </Item>
          <Item {...formItemLayout} label="备份路径">
            {getFieldDecorator('backPath', {
              initialValue: formatData && formatData.backPath,
            })(<Input/>)}
          </Item>
          <Item {...formItemLayout} label="用户名">
            {getFieldDecorator('userName', {
              initialValue: formatData && formatData.userName,
            })(<Input />)}
          </Item>
          <Item {...formItemLayout} label="密码">
            {getFieldDecorator('password', {
              initialValue: formatData && formatData.password,
            })(<Input type="password" />)}
          </Item>
          <Item {...formItemLayout} label="备注">
            {getFieldDecorator('remark', {
              initialValue: formatData && formatData.remark,
            })(<Input />)}
          </Item>
        </Form>
      </Modal>
    );
  }
}

export default Components;
